<template>
  <div class="unit_account">
      <el-form :inline="true" :model="elform" class="demo-form-inline">
            <el-form-item label="账户名称:">
              <el-input v-model="elform.accountname" placeholder="账户名称" size="mini" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit" size="mini" icon="el-icon-search">查询</el-button>
            </el-form-item>
            <el-form-item class="addsubmit">
              <el-button type="primary" @click="addsubmit" size="mini" icon="el-icon-plus" >分配账户</el-button>
            </el-form-item>
       </el-form>
       <el-table
          v-loading="dataListLoading"
          :data="tableData"
          border
          highlight-current-row
          style="width: 100%">
          <el-table-column
            prop="loginName"
            label="账号"
          >
          </el-table-column>
          <el-table-column
            prop="userName"
            label="用户名"
          >
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button  type="danger" size="mini" icon="el-icon-delete" @click="deleOrUpdateHandle(scope.row)">删除</el-button>
            </template>
          </el-table-column>  
        </el-table>
        <div class="page">
            <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChangepage"
               :current-page="currentPage"
               :page-sizes="[10, 20, 30, 40]"
               :page-size="pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="recordCount"
             >
             </el-pagination>
         </div>
         <!-- 弹窗 -->
        <el-dialog title="可分配账户" :visible.sync="dialogTableVisible" :close-on-click-modal="false">
                <el-table :data="tableData1">
                  <el-table-column prop="loginName" label="账号"></el-table-column>
                  <el-table-column prop="userName" label="用户名" width="200"></el-table-column>
                  <el-table-column  label="操作">
                       <template slot-scope="scope">
                            <el-button type="primary" @click="adduser(scope.row)" size="mini" icon="el-icon-plus" >分配账户</el-button>
                        </template>
                  </el-table-column>
                </el-table>
                <div class="page">
                     <el-pagination
                        @size-change="handleSizeChange1"
                        @current-change="handleCurrentChangepage1"
                        :current-page="currentPage1"
                        :page-sizes="[10, 20, 30, 40]"
                        :page-size="pageSize1"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="recordCount1"
                      >
                      </el-pagination>
                </div>
        </el-dialog>
  </div>
</template>

<script>
export default {
    data() {
        return {
            elform:{
                accountname:''
            },
            tableData:[],
            dataListLoading:false,
            searchInfo:{},
            pageSize: 10,
            pageNum:1,
            currentPage:1,
            recordCount:0,
            userGuid:'',
            dialogTableVisible:false,
            gridData:[],
        }
    },
    created() {
        this.userGuid=sessionStorage.getItem('administrator')
    },
    mounted() {
        this.initpage()
    },
    computed: {
     changeschoolid:{
        get () { 
            return this.$store.state.user.changeschoolid 
        },
      }, 
    },
    methods: {
        //单位账户管理列表
        initpage(){
            if(this.elform.accountname!=''&&this.elform.accountname!=null){
                this.searchInfo.userName=this.elform.accountname
            }
            this.searchInfo.unitGuid=this.changeschoolid
            this.searchInfo.userGuid=this.userGuid
            this.dataListLoading=true
            this.$http({
            url: this.$http.adornUrl("/unit/select-unit-agent-page-unit"),
            method: "post",
            data: this.$http.adornData({
              messageContent:{
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                searchInfo:this.searchInfo
              },
              messageType: this.messageType
            })
            }).then(({ data }) => {
              console.log(data)  
              if (data.messageCode == 200) {
                this.tableData=data.messageContent.data
                this.recordCount=data.messageContent.recordCount
                this.currentPage=data.messageContent.pageNum
                this.dataListLoading=false
                this.searchInfo={}
              }else{
                this.$message.error(data.errorMessage)
                this.searchInfo={}
              }
            });

        },
        //弹窗获取账户信息
        inituserlist(){
            this.$http({
            url: this.$http.adornUrl("/unit/select-not-manage-unit-page"),
            method: "post",
            data: this.$http.adornData({
              messageContent:{
                pageNum:this.pageNum1,
                pageSize:this.pageSize1,
                searchInfo:this.searchInfo1
              },
              messageType: this.messageType
            })
            }).then(({ data }) => {
              console.log(data)  
              if (data.messageCode == 200) {
                this.tableData1=data.messageContent.data
                this.recordCount1=data.messageContent.recordCount
                this.currentPage1=data.messageContent.pageNum
                this.searchInfo1={}
              }else{
                this.$message.error(data.errorMessage)
                this.searchInfo1={}
              }
            });
        },
        adduser(row){
            // console.log(row)
            // return
            this.$http({
            url: this.$http.adornUrl("/unit/distribute-unit-agent"),
            method: "post",
            data: this.$http.adornData({
              messageContent:{
                unitGuid:this.changeschoolid,
                userGuid:row.userGuid,
              },
              messageType: 0
            })
            }).then(({ data }) => {
              if (data.messageCode == 200) {
                this.$message({
                    message:'分配成功',
                    type: 'success'
                })
                this.initpage()
                this.dialogTableVisible=false
              }else{
                this.$message.error(data.errorMessage)
              }
            });
        },
        onSubmit(){
           this.pageNum=1 
           this.initpage()
        },
        addsubmit(){
            this.dialogTableVisible=true
            this.searchInfo1.userGuid=this.userGuid
            this.searchInfo1.unitGuid=this.changeschoolid
            this.$nextTick(() => {
                this.inituserlist()
            })
        },
        deleOrUpdateHandle(row){
            this.$confirm('此操作将删除该账户分配, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.deleuser(row.userGuid)
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消操作'
              })
            })
        },
        //删除该账户分配
        deleuser(id){
            this.$http({
               url: this.$http.adornUrl('/unit/delete-unit-agent'),
               method: 'post',
               data: this.$http.adornData({
                 messageContent:{
                    unitGuid:this.changeschoolid,
                    userGuid:id
                },
                messageType:0
               })
            })
            .then(({data}) => {
                if(data.messageCode===200){
                    this.$message({
                        message:'删除成功',
                        type: 'success'
                     })
                     this.initpage()
                }
                else{
                   this.$message.error(data.errorMessage);
                   return
                }
            })
        },
        handleSizeChange(val){
         this.pageSize=val
         this.initpage()
        },
        handleCurrentChangepage(val){
         this.pageNum=val
         this.initpage()
        },
        handleSizeChange1(val){
            this.searchInfo1.userGuid=this.userGuid
            this.searchInfo1.unitGuid=this.changeschoolid
            this.pageSize1=val
            this.$nextTick(() => {
                this.inituserlist()
            })
        },
        handleCurrentChangepage1(val){
            this.pageNum1=val
            this.searchInfo1.userGuid=this.userGuid
            this.searchInfo1.unitGuid=this.changeschoolid
             this.$nextTick(() => {
                this.inituserlist()
            })
        }
    },
}
</script>

<style lang="scss" scoped>
    .unit_account{
        padding: 20px;
        .demo-form-inline{
             height: 60px;
             display: flex;
             .el-form-item{
                margin-bottom: 0px;
             }
             /deep/.el-form-item__label{
                padding-right: 5px;
            }
            .addsubmit{
                // float: right;
                // margin-right: 0px;
                // margin-left:auto;
            }
        }
        .page{
            display: flex;
            justify-content: center;
            align-items: center;
        }
     }    
</style>